<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/style/style.css">
<script src="${pageContext.request.contextPath}/static/script/index.js"></script>
<script src="${pageContext.request.contextPath}/static/script/button.js"></script>
<title>搜索-${query}</title>
</head>
<body>
	<nav class="aho-top-bar aho-box-shadow-mid">
		<section class="main">
			<span><a href="${pageContext.request.contextPath}">OnlineBookStore</a></span>
		</section>
		<section class="toolbar">
			<form action="search" method="GET" class="search-bar">
				<c:if test="${query == null}">
					<input type="text" placeholder="搜索图书" id="search-content" name="q" />
				</c:if>
				<c:if test="${query != null}">
					<input type="text" placeholder="搜索图书" id="search-content" name="q"
						value="${query}" />
				</c:if>
				<div id="search-btn" class="search-button">
					<svg style="width: 20px; height: 20px;" fill="none"
						stroke="currentColor" viewBox="0 0 24 24"
						xmlns="http://www.w3.org/2000/svg">
						<path stroke-linecap="round" stroke-linejoin="round"
							stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
				</div>
			</form>
		</section>
		<section class="toolbar">
			<c:if test="${account == null}">
				<a class="toolbar-action"
					href="${pageContext.request.contextPath}/login"> 登录 </a>
			</c:if>
			<c:if test="${account != null}">
				<a class="toolbar-action"
					href="${pageContext.request.contextPath}/profile">
					<svg style="width: 24px; height: 24px;" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
					  <path stroke-linecap="round" stroke-linejoin="round" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
					</svg>
				</a>
				<a class="toolbar-action"
					href="${pageContext.request.contextPath}/shopping-cart"> <svg
						style="width: 24px; height: 24px;" fill="none"
						stroke="currentColor" viewBox="0 0 24 24"
						xmlns="http://www.w3.org/2000/svg">
						<path stroke-linecap="round" stroke-linejoin="round"
							stroke-width="2"
							d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
				</a>
				<a href="${pageContext.request.contextPath}/logout"
					class="toolbar-action"> <span
					class="aho-icon aho-icon-logout"></span>
				</a>
			</c:if>
		</section>

	</nav>
	<main class="center big-width flex-page flex-column">
		<div class="search-toolbox">
			<div class="l-btn">
				<input type="radio" id="price-desc" name="price" value="1"><label for="price-desc">价格降序</label>
			</div>
			<div class="r-btn">
				<input type="radio" id="price-asc" name="price" value="0"> <label for="price-asc">价格升序</label>
			</div>
		</div>
		<div class = "flex-page">
		<c:forEach items="${books}" var="book">
			<div class="book-item" data-id="${book.id}">
				<div class="book-img">
					<img
						src="${pageContext.request.contextPath}/static/imgs/${book.id}.png">
				</div>
				<div class="book-price">
					<p>${book.price}</p>
				</div>
				<div class="book-title">
					<h5>${book.title}</h5>
				</div>
			</div>
		</c:forEach>
		</div>
	</main>
	<script>
		var dir = ${dir == null ? 1 : dir};
		var btnSearch = document.getElementById("search-btn");
		var inputContent = document.getElementById("search-content");
		var btnSearch = document.getElementById("search-btn");
		
		function search() {
			if (inputContent.value == '') {
				return;
			}
			window.open("${pageContext.request.contextPath}/search?q=" + encodeURI(inputContent.value)+"&dir="+dir, "_self");
		}
		var price_desc =  document.getElementById("price-desc");
		var price_asc =  document.getElementById("price-asc");
		if (dir === 0) {
			price_desc.checked = true;
			price_desc.parentElement.classList.add("red-btn");
			price_asc.parentElement.classList.add("shadow-inset");
		} else if (dir === 1) {
			price_asc.checked = true;
			price_asc.parentElement.classList.add("red-btn");
			price_desc.parentElement.classList.add("shadow-inset");
		}
		price_desc.addEventListener("change", (e)=>{
			dir = 0;
			search();
		});
		price_asc.addEventListener("change", (e)=>{
			dir = 1;
			search();
		});
		
		btnSearch.addEventListener("click", search);
		document.querySelectorAll(".book-item").forEach((e) => {
			e.addEventListener("click",(_) => {
				let id = e.getAttribute("data-id");
		   			window.open("book/"+id, "_self");
			});
		});
    </script>
</body>
</html>